<template>
	<view class="wrap">
		<view class="info">
			<image class="info-bg" src="../../static/images/icon-normal-bg.png"></image>
			<view class="userInfo">
				<view class="userInfo-avatar">
					<image
						:src="gShopInfo.logoImg &&(gShopInfo.logoImg.indexOf('https://')!=-1 || gShopInfo.logoImg.indexOf('http://')!=-1) ? gShopInfo.logoImg : concatRequestUrl(gShopInfo.logoImg)">
					</image>
				</view>
				<view class="userInfo-R">
					<!-- <view class="userInfo-levelname fw">{{gUserInfo.levelName}}</view> -->
					<view class="userInfo-levelname fw" v-if="gUserInfo.growth>2999">钻石会员</view>
					<view class="userInfo-levelname fw" v-else-if="gUserInfo.growth>1999">铂金会员</view>
					<view class="userInfo-levelname fw" v-else-if="gUserInfo.growth>999">黄金会员</view>
					<view class="userInfo-levelname fw" v-else-if="gUserInfo.growth>499">白金会员</view>
					<view class="userInfo-levelname fw" v-else-if="gUserInfo.growth>0">普通会员</view>
					<view class="userInfo-levelname fw" v-else>普通会员</view>
					<view class="userInfo-RB" v-if="gUserInfo&&gUserInfo.vipExpireTime">
						<view class="userInfo-RB_authority">接单特权：{{gUserInfo.vipExpireTime}}</view>
						<view class="userInfo-RB_Btn app_flex-aicjcc" @click="onSkipTap('openPrivilege')">续费</view>
					</view>
					<view class="userInfo-RB" v-else>
						<view class="userInfo-RB_authority">接单特权：未开通</view>
						<view class="userInfo-RB_Btn app_flex-aicjcc" @click="onSkipTap('openPrivilege')">开通</view>
					</view>
				</view>
			</view>
			<view class="info-progress">
				<view class="info-progress-t app_flex-jcsb fw">
					<text>当前{{gUserInfo.growth}}</text>
					<text v-if="gUserInfo.growth>2999">距离下一级还差0</text>
					<text v-else-if="gUserInfo.growth>1999">距离下一级还差{{3000 - gUserInfo.growth}}</text>
					<text v-else-if="gUserInfo.growth>999">距离下一级还差{{ 2000 - gUserInfo.growth }}</text>
					<text v-else-if="gUserInfo.growth>499">距离下一级还差{{ 1000 - gUserInfo.growth }}</text>
					<text v-else-if="gUserInfo.growth>=0">距离下一级还差{{ 500 - gUserInfo.growth }}</text>
				</view>
				<view class="info-progress-line">
					<view class="info-progress-lineActive" v-if="gUserInfo.growth>2999" :style="{width: `100%`}"></view>
					<view class="info-progress-lineActive" v-else-if="gUserInfo.growth>1999"
						:style="{width: `${(gUserInfo.growth - 2000)/1000*100}%`}"></view>
					<view class="info-progress-lineActive" v-else-if="gUserInfo.growth>999"
						:style="{width: `${(gUserInfo.growth - 1000)/1000*100}%`}"></view>
					<view class="info-progress-lineActive" v-else-if="gUserInfo.growth>499"
						:style="{width: `${(gUserInfo.growth - 500)/500*100}%`}"></view>
					<view class="info-progress-lineActive" v-else-if="gUserInfo.growth>=0"
						:style="{width: `${(gUserInfo.growth)/500*100}%`}"></view>
				</view>
			</view>
		</view>
		<view class="level">
			<view class="level-header app_flex">
				<view class="app_flex1 app_flex-aicjcc">会员等级</view>
				<view class="app_flex1 app_flex-aicjcc">充值额度</view>
			</view>
			<view class="level-item app_flex">
				<view class="app_flex1 app_flex-aicjcc">
					<image src="../../static/images/icon-normal-tag.png"></image>
				</view>
				<view class="app_flex1 app_flex-aicjcc">0-499</view>
			</view>
			<view class="level-item app_flex">
				<view class="app_flex1 app_flex-aicjcc">
					<image src="../../static/images/icon-baijin-tag.png"></image>
				</view>
				<view class="app_flex1 app_flex-aicjcc">500-999</view>
			</view>
			<view class="level-item app_flex">
				<view class="app_flex1 app_flex-aicjcc">
					<image src="../../static/images/icon-gold.png"></image>
				</view>
				<view class="app_flex1 app_flex-aicjcc">1000-1999</view>
			</view>
			<view class="level-item app_flex">
				<view class="app_flex1 app_flex-aicjcc">
					<image src="../../static/images/icon-bojin-tag.png"></image>
				</view>
				<view class="app_flex1 app_flex-aicjcc">2000-2999</view>
			</view>
			<view class="level-item app_flex">
				<view class="app_flex1 app_flex-aicjcc">
					<image src="../../static/images/icon-zuanshi-tag.png"></image>
				</view>
				<view class="app_flex1 app_flex-aicjcc">3000以上</view>
			</view>
		</view>
		<view class="tips">
			<view class="tips-header">会员等级说明</view>
			<view class="tips-main">1、这是会员等级说明，这是权益内容是权益内容说明2、这是权益内容说明这是权益内容权益内容说明3、这是权益内容说明这是权益内容说明这是权益内容说明这是权益内容说明
			</view>
		</view>
	</view>
</template>

<script>
	import Config from '../../common/js/config.js'
	export default {
		data() {
			return {
				requestUrl: Config.requestUrl || ''
			}
		},
		onLoad(options) {
			this.$store.dispatch('updateUserInfo')
		},
		methods: {
			onSkipTap(type, index) {
				const urlObj = {
					openPrivilege: '/pages/vip/openPrivilege'
				}
				this.$g_util.navigationTo(urlObj, type)
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.wrap {
		padding: 30rpx;
	}

	.info {
		position: relative;
		width: 690rpx;
		height: 260rpx;
		padding: 34rpx 30rpx 20rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.info-bg {
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
		width: 690rpx;
		height: 260rpx;
	}

	.userInfo {
		display: flex;
		align-items: center;
	}

	.userInfo-avatar {
		font-size: 0;
		margin-right: 20rpx;

		image {
			width: 110rpx;
			height: 110rpx;
			border-radius: 50%;
			border: 2px solid #fff;
			background-color: #ccc;
		}
	}

	.userInfo-R {}

	.userInfo-levelname {
		margin-bottom: 10rpx;
		font-size: 36rpx;
		// font-weight: bold;
	}

	.userInfo-RB {
		display: flex;
		align-items: center;
	}

	.userInfo-RB_authority {
		font-size: 22rpx;
		color: #fff;
	}

	.userInfo-RB_Btn {
		margin-left: 20rpx;
		width: 100rpx;
		height: 50rpx;
		border-radius: 26rpx;
		border: 1px solid #fff;
		font-size: 24rpx;
		color: #fff;
	}

	.info-progress {
		position: absolute;
		left: 30rpx;
		bottom: 20rpx;
	}

	.info-progress-t {
		margin-bottom: 10rpx;
		font-size: 20rpx;
	}

	.info-progress-line {
		position: relative;
		width: 630rpx;
		height: 8rpx;
		border-radius: 4rpx;
		background-color: #fff;
	}

	.info-progress-lineActive {
		position: absolute;
		left: 0;
		top: 0;
		width: 0%;
		height: 8rpx;
		border-radius: 4rpx;
		background-color: #7188A9;
	}

	.level {
		margin-top: 48rpx;
	}

	.level-header {
		font-size: 24rpx;
		color: #CC7A52;
		background-color: #FFEEE5;

		view {
			height: 70rpx;
		}
	}

	.level-item {
		border-left: 1px solid $g-border-color;
		border-right: 1px solid $g-border-color;

		view {
			height: 80rpx;
			border-bottom: 1px solid $g-border-color;

			&:first-child {
				border-right: 1px solid $g-border-color;
			}
		}

		image {
			width: 124rpx;
			height: 40rpx;
		}
	}

	.tips {}

	.tips-header {
		margin: 40rpx 0 10rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.tips-main {
		font-size: 28rpx;
	}
</style>